liankao/src/pages/ksfx/cjfx_pjflcfx/[ykj_id].vue

<template>
  <div class="cjfx_pjflcfx">
    <NavHeader />
    <bread-crumb />

    <div class="w-1200px m-auto flex flex-row justify-between">
      <div class="w-188px">
        <leftSider :ykjId="ykjId" :activeIndex="activeIndex"  @parentClick="parentClick"/>
      </div>

      <div class="w-1012px p-4 blueBg">

        <div class="flex items-center">

          <optionSelect  @optionClick="optionClick" />

        </div>
        <div class="flex justify-between mt-4 exportBtn">
          <div>
            <el-button color="#003eee" type="primary" size="large" @click="exportBtn">导出</el-button>
          </div>

        </div>

        <div class="h-150 mt-20px overflow-x-auto echartData" id="echartData"></div>

        <div class="w-full h-auto tableList">
           <div class="h-50px rounded flex flex-nowrap tableList_title">
            <div class="singleT" v-for="(item,index) in classArr" :key="index">{{item}}</div>
          </div>

          <div class="h-auto flex flex-nowrap tableList_content" v-for="(item,index) in classBaseInfoArr" :key="index">
            <div class="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.xx }}</div>
            <div class="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.pjf }}</div>
            <div class="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.zjf }}</div>
            <div class="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.jflc }}</div>
          </div>
        </div>

      </div>




    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import * as echarts from 'echarts';
import {cjfx_pjflcfx_list } from '../apiItem';
const route = useRoute();
import { user } from "~/store";

const activeIndex =ref('1-4');
const ykjId = ref();
const parentClick = (val: string) => {
  activeIndex.value = val;
  ykjId.value = route.params.ykj_id;
}

let classArr = ref([]);

let classBaseInfoArr = ref([
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
]);

ykjId.value = route.params.ykj_id;
onMounted(() => {
  initData();
})

const school_id = ref("");
const grade_id = ref("");
const xueke_id = ref("");
const initData =() => {
  let transObj = {
    school_id:school_id.value,
    cm_id: grade_id.value,
    xueke_id: xueke_id.value,
    jh_id:route.params.ykj_id
  }
  cjfx_pjflcfx_list(transObj)
    .then(res => {
      if (res.code == "1") {
        classArr.value = res.data.data.classArr;
        classBaseInfoArr.value = res.data.data.classBaseInfoArr;
        initChart(res.data.data.ecahrtData)
      }
    })
  .catch(error=>{console.log(error)})
}

//option筛选
const optionClick = (val: any, marke: any) => {
  if (marke == "scholl") {
    school_id.value = val;
  } else if (marke == "grade") {
    grade_id.value = val;
  } else {
    xueke_id.value = val;
  }
  initData();
}

const initChart = (item: { xAxis_data: any; series: any; }) => {
  const colors=['#9CFF68','#FE6868']
  var myChart = echarts.init(document.getElementById('echartData'));
  myChart.setOption({
  title: {
    text: '平均分',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      data: item.xAxis_data
    }
  ],
  yAxis: [
    {
      type: 'value'
    }

  ],
  series: item.series,

});
}

//导出
const exportBtn = () => {
  let prefixedUrl = window.GLOBAL_CONFIG.web_pc;
  let fullUrl = prefixedUrl + '/openapi/echart/average_data.php?api=xls&token=' + user.value.token;
  window.open(fullUrl,'_blank')
}

</script>


<style lang="scss" scoped>
:deep(.el-sub-menu__title)  {
  background: #003eee;
  color: #fff;
}

:deep(.el-table__header thead tr th)  {
  background: #003eee !important;
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-weight: normal;
}

:deep(.el-table__header thead tr th:first-child)  {
  border-top-left-radius: 9px;
}

:deep(.el-table__body tbody .el-table__row td)  {
  background-color: transparent;
}

:deep(.el-dialog__footer)  {
  text-align: center;
}

.blueBg {
  background: #F1F7FF;
}

.whiteBG {
  background: #fff;
}

.singlepart {
  background-color: rgba($color: #ffffff, $alpha: 0.2);
  color: #fff;
}

.tableList {
  overflow-x: scroll;
}

.tableList_title {
  font-size: 14px;
  color: #fff;
}

.singleT {
  flex: 1;
  font-size: 14px;
  line-height: 50px;
  width: fit-content;
  text-align: center;
  background: #003eee;
}
.singleT:first-child{
  border-top-left-radius: 5px;
}
.singleT:last-child{
  border-top-right-radius: 5px;
}

.singleD {
  flex: 1;
}

.singleTSec {
  width: fit-content;
  flex: 1;
  line-height: 60px;
  text-align: center;
}
.singleTSecDif{
  background-color: #fff;
}
</style>